<template>
  <div class="video-overview">
    <div class="video-list">
      <div class="title">
        <span>视频监控</span>
<!--        <i class="el-icon-setting" @click="handleSet"></i>-->
        <i v-if="hasTabAdd" class="el-icon-plus" @click="handleAdd"></i>
      </div>
      <ul>
        <li
          v-if="liveList && liveList.length > 15"
          :class="{ active: activeId === 'all' }"
          @click="handleSwitch('all')">
          显示所有摄像头
        </li>
        <li
          v-for="(item, index) in liveList"
          :class="{ active: activeId === index }"
          :key="index"
          @click="handleSwitch({ ...item, index })">
          <span>{{ item.name_device }} {{ item.nums_device ? `(${item.nums_device})` : ''}}</span>
          <div class="btn">
            <i v-if="hasTableEdit" class="el-icon-edit-outline" @click.stop="handleEdit(item)"></i>
            <i v-if="hasTableDel" class="el-icon-delete" @click.stop="handleDelete(item)"></i>
          </div>
        </li>
<!--        <li-->
<!--          v-for="(item, index) in liveList"-->
<!--          :class="{ active: activeId === item.id }"-->
<!--          :key="item.id"-->
<!--          :title="item.cameraName"-->
<!--          @click="handleSwitch(item)">-->
<!--          <span>{{ item.cameraName }}</span>-->
<!--          <div class="btn">-->
<!--            <span style="display: none">{{ item.cameraName }}</span>-->
<!--            <i v-if="hasTableEdit" class="el-icon-edit-outline" @click.stop="handleEdit(item)"></i>-->
<!--            <i v-if="hasTableDel" class="el-icon-delete" @click.stop="handleDelete({ ...item, index })"></i>-->
<!--          </div>-->
<!--        </li>-->
      </ul>
    </div>
    <main>
      <transition v-if="liveList && liveList.length > 15" name="fade">
        <div v-show="!videoVisible" class="video-list-container">
          <div
            class="video-item"
            v-for="(item, index) in liveList"
            :key="item.nums_device + index">
            <video-play :data="setLiveOptions(item)"></video-play>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div v-if="videoVisible" class="video-container">
          <video-play :data="videoConfig"></video-play>
        </div>
      </transition>
    </main>
    <set-live
      :type="liveType"
      :formData="liveData"
      :loading="loading"
      :projectId="projectId"
      :visible="liveVisible"
      @cancel="liveVisible = false"
      @save="handleSave">
    </set-live>
    <camera-set
      :visible="setVisible"
      :projectId="projectId"
      @cancel="setVisible = false"
      @submit="handleSubmit">
    </camera-set>
  </div>
</template>

<script>
import VideoPlay from '@/components/public/Video';
import setLive from '@/components/project/surveillance/setLive';
import CameraSet from '@/components/project/surveillance/CameraSet';

// 视频监控
export default {
  components: {
    VideoPlay,
    setLive,
    CameraSet,
  },
  data() {
    return {
      videoVisible: false,
      // 当前选中标记
      activeId: 'all',
      // 直播列表
      liveList: [],
      // 直播配置
      videoConfig: {},
      // 编辑、新增视频监控弹框
      liveVisible: false,
      // 弹框类型
      liveType: 'add',
      setVisible: false,
      // 视频监控数据
      liveData: null,
      loading: false
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    projectName() {
      return this.$store.state.currentProjectInfo.projectName;
    }
  },
  async created() {
    // await this.getCameraList();
    await this.getLiveToken();
  },
  methods: {
    // 获取摄像机列表
    async getCameraList() {
      const { success, data: {
        data
      }} = await this.$Model.getCameraDeviceList({
        pageFlag: false,
        projectId: this.projectId,
      });
      if (success && data) {
        this.liveList = data.list || [];
        if (this.activeId) {
          const item = this.liveList.find(v => v.id === this.activeId);
          if (item) {
            this.handleSwitch({ ...item });
            return;
          }
        }
        this.liveList[0] && this.handleSwitch({ ...this.liveList[0] });
      }
    },
    // 获取摄像机token和播放路径
    async getAddressByDeviceSerial({ deviceSerial, channelNo }) {
      const { success, data: {
        data
      }} = await this.$Model.getAddressByDeviceSerial({
        deviceSerial,
        channelNo,
        projectId: this.projectId,
      });
      if (success && data) {
        this.setVideoConfig({ ...data });
      }
    },
    /**
     * 获取所有摄像机的信息
     */
    async getLiveToken() {
      try {
        const { success, data } = await this.$Model.getameraList({
          project_name: this.projectName
        });
        if (success && data.data) {
          const result = data.data.data;
          this.liveList = Array.isArray(result) ? result : [];
          if (this.liveList.length && this.liveList.length < 15) {
            this.videoVisible = this.liveList.length < 15;
            this.handleSwitch(this.liveList[0], 0);
          }
        }
      } catch (e) {}
    },
    /**
     * 设置直播配置
     * @param options {Object} 摄像机信息
     */
    setLiveOptions(options) {
      if (!options) return;
      const { access_token, nums_device, passageway } = options;
      return {
        autoplay: false,
        accessToken: access_token,
        url: `ezopen://open.ys7.com/${nums_device}/${passageway}.live`
      };
    },
    // 配置摄像头
    handleSet() {
      this.setVisible = true;
    },
    /**
     * 切换直播
     * @param options {Object | String}
     */
    handleSwitch(options) {
      this.videoVisible = options !== 'all';
      if (options && options !== 'all') {
        this.setVideoConfig(options);
        // this.getAddressByDeviceSerial(options);
        // this.activeId = options.id;
        return;
      }
      this.activeId = 'all';
    },
    /**
     * 设置直播配置
     * @param options {Object}
     */
    setVideoConfig(options) {
      const { access_token, nums_device, passageway, index } = options;
      this.activeId = index;
      this.videoConfig = {
        accessToken: access_token,
        url: `ezopen://open.ys7.com/${nums_device}/${passageway}.hd.live`
      };
    },
    /**
     * 设置直播配置
     * @param options {Object}
     */
    // setVideoConfig(options) {
    //   const { accessToken, url } = options;
    //   this.videoConfig = {
    //     accessToken,
    //     url
    //   };
    // },
    /**
     * 新增视频监控
     */
    handleAdd() {
      this.liveType = 'add';
      this.liveData = {};
      this.liveVisible = true;
    },
    /**
     * 编辑视频监控
     * @param data {Object} 当前项数据
     */
    handleEdit(data) {
      this.liveType = 'edit';
      this.liveData = { ...data };
      this.liveVisible = true;
    },
    /**
     * 删除视频监控
     * @param data {Object} 当前项数据
     */
    handleDelete({ id }) {
      // this.$confirm('此操作将删除该视频, 是否继续?', '提示', {
      //   type: 'warning'
      // }).then(async () => {
      //   const { success } = await this.$Model.delLocalCamera({
      //     ids: id,
      //   });
      //   if (success) {
      //     this.$message.success('删除成功');
      //     this.getCameraList();
      //   }
      // });
    },
    /**
     * 保存视频监控修改
     * @param data {Object} 表单数据
     */
    async handleSave(data) {
      return;
      const { channelNo, location, ...others } = data;
      let pointPosition = '';
      try {
        pointPosition = location ? JSON.stringify(location) : '';
      } catch (e) {}
      const params = {
        ...others,
        channelNo: Array.isArray(channelNo) ? channelNo[1] : '',
        deviceSerial: Array.isArray(channelNo) ? channelNo[0] : '',
        pointPosition,
        projectId: this.projectId
      };
      const hasAdd = this.liveType === 'add';
      if (hasAdd) delete params.id;
      this.loading = true;
      const { success } = hasAdd
        ? await this.$Model.addLocalCamera(params)
        : await this.$Model.updateLocalCamera(params);
      this.loading = false;
      if (success) {
        this.$message.success('保存成功');
        this.getCameraList();
        this.liveVisible = false;
      }
    },
    // 保存视频配置
    handleSubmit(params) {
      this.$confirm('此操作将修改当前项目的视频配置, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        if (!params.id) delete params.id;
        const { success } = params.id
          ? await this.$Model.updateCameraConfig(params)
          : await this.$Model.addCameraConfig(params);
        if (success) {
          this.getCameraList();
          this.$message.success('保存成功');
          this.setVisible = false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/main';
  .video-overview {
    width: 100%;
    height: 100%;
    background-color: $baseBg;
    position: relative;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 45px 30px;
    .video-list {
      width: 415px;
      height: 100%;
      overflow: auto;
      background-color: $mainBg;
      padding: 20px;
      margin-right: 30px;
      border-radius: 8px;
      .title {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        i {
          margin-left: 10px;
          width: 25px;
          height: 25px;
          text-align: center;
          line-height: 25px;
          background-color: rgba(160, 164, 179, 0.4);
          border-radius: 5px;
          cursor: pointer;
          &:hover {
            color: $lightBtnBg;
          }
        }
      }
      li {
        width: 100%;
        height: 40px;
        margin: 20px 0;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #31316d;
        padding: 0 10px;
        border-radius: 10px 17px 0 10px;
        cursor: pointer;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          right: -17px;
          top: 15px;
          width: 0;
          height: 0;
          border-width: 5px 20px;
          border-style: solid;
          border-color: #31316d #31316d transparent transparent;
          border-radius: 10px 6px 0 0;
          transform: rotate(70deg);
        }
        &:hover, &.active {
          background: $linearG;
          &:after {
            border-color: #1f46dc #1f46dc transparent transparent;
          }
        }
        span {
          max-width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .btn {
          width: 60px;
          height: 100%;
          padding: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 10px;
          font-size: 16px;
          z-index: 1;
          i:hover {
            color: $mainColor;
          }
        }
      }
    }
    main {
      flex: 1;
      height: 100%;
      padding: 40px 0;
      overflow: hidden;
      position: relative;
      .video-list-container {
        width: 100%;
        height: calc(100% - 80px);
        overflow: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        position: absolute;
        padding-right: 10px;
        .video-item {
          width: 690px;
          height: 400px;
          margin-bottom: 20px;
          &.active {
            width: 100%;
            height: 100%;
            transition: all 1s;
            > iframe {
              width: 100%;
              height: 100%;
            }
          }
          &.active ~ .video-item {
            display: none;
          }
        }
      }
      .video-container {
        width: calc(100% - 60px);
        height: calc(100% - 60px);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        position: absolute;
      }
    }
    .fade-enter-active, .fade-leave-active {
      transition: all 1s;
      transform: translateX(0%);
      opacity: 1;
    }
    .fade-enter, .fade-leave-to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
</style>
